<template>
  <div>
    <!-- Hidden inputs from HTML head -->
    <input id="topicId" type="hidden" value="2"/>
    <input id="isAdmin" type="hidden" value=""/>
    <input id="STATICURL" type="hidden" value="//static.clewm.net/cli"/>


    <!-- 导航菜单 -->
    <nav class="cli_nav new-light scene_mobile clearfix">
      <ul class="sub_nav sub_mobile_nav cli_head_container clearfix">
        <li><router-link class="t06971093650622ab_sep [navigation_text]" to="/qrcode/text" @click="StatisticsData(120,11)" title="生成文本二维码">文本</router-link></li>
        <li><router-link class="tab_sep [navigation_url]" to="/qrcode/url" @click="StatisticsData(120,12)" title="生成网址二维码">网址</router-link></li>
        <li><router-link class="tab_sep on [navigation_files]" to="/qrcode/files" @click="StatisticsData(120,13)" title="生成文件二维码">文件</router-link></li>
        <li><router-link class="tab_sep [navigation_img]" to="/qrcode/img" @click="StatisticsData(120,14)" title="生成图片二维码">图片</router-link></li>
        <li><router-link class="tab_sep [navigation_multimedia]" to="/qrcode/multimedia" @click="StatisticsData(120,15)" title="生成音视频二维码">音视频</router-link></li>
        <li><router-link class="tab_sep [navigation_vcard]" to="/qrcode/vcard" @click="StatisticsData(120,16)" title="名片二维码">名片</router-link></li>
        <li><router-link class="tab_sep [navigation_weixin]" to="/qrcode/weixin" @click="StatisticsData(120,17)" title="美化微信二维码">微信</router-link></li>
        <li><router-link class="tab_sep [navigation_form]" to="/qrcode/form" @click="StatisticsData(120,124001)" title="记录表单">表单</router-link></li>
        <li><router-link class="tab_sep [navigation_batch]" to="/qrcode/batch" title="批量生码">批量生码</router-link></li>
        <li><router-link class="tab_sep [navigation_tools]" to="/qrcode/tools" @click="StatisticsData(120,161)" title="更多高级功能">更多工具</router-link></li>
        <li class="pull-right right-nav-items none-after-form">
          <ul>
            <li class="pull-left nav-tool-popover-scan-new">
              <router-link class="template-code" data-analyze="8,118010" to="/qrcode/template" id="__index_template">
                <i class="clifont anticon-moban1"></i>
                模板库建码
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <!-- Main content wrapper -->
    <div class="wrapper new-light mobile-scene-min-width file-container adaptive-min-height" id="file-container">
      <div class="page-main-content p-b-md file-content-wrap">
        <div class="alert alert-warning none" id="VerifyTip"></div>

        <div class="row noMagrin x-initContent">
          <!-- Left column - File upload section -->
          <div class="col-md-8 noPadding" id="qrgenerate-box" style="width: 67.6%; float: left;">
            <input id="imgfile" type="hidden" value=""/>
            <input id="filename" type="hidden" value=""/>

            <div class="caoliao-portal-root">
              <div id="base-root"></div>
              <div id="caoliao-portal-root">
                <div>
                  <div class="actions___2sQO-">
                    <a class="actionItem___2doSk" href="https://console.cli.im/nedit?pageFrom=frontBuild&action=more&create_from=74&bgImg=1" rel="opener" target="_blank">背景设置</a>
                    <a class="actionItem___2doSk actionBoxItem___2j5QY" href="https://console.cli.im/nedit?pageFrom=frontBuild&action=more&create_from=74" rel="opener" target="_blank">
                      <i class="clifont anticon-gaojibianji"></i>高级编辑
                    </a>
                    <div class="__consoleBaseCompContainer"></div>
                  </div>

                  <div>
                    <div>
                      <div class="wrapper___3Oh2U beforeUpload___2wg0L __file_upload-wrapper" style="cursor:pointer">
                        <div><div><div></div></div></div>
                        <div class="content___3UKYb">
                          <div class="wrapper___1ApIw">
                            <section class="wrapperWhenGuide___sEm6P __wrapperWhenDrag_upload">
                              <i class="clifont anticon-shangchuanwenjian"></i>
                              <h2 class="title___shllO">上传文件</h2>
                              <div class="tips___3bwFZ">
                                <div>点击、拖拽或者复制粘贴文件到这里，支持 word、excel、pdf 等多种格式</div>
                                <div>一次可上传多个文件，单个文件大小免费版最大50M，付费版500M，总存储空间不限 <a class="g-link" href="help/69192.html" target="_blank">常见问题</a></div>
                              </div>
                            </section>
                            <div class="wrapperWhenDrag___18_ha __wrapperWhenDrag_drag">
                              <div class="dragtip drag">
                                <i class="clifont anticon-cli-upload"></i>
                                <div class="text-wrap">
                                  <p class="tip-text">文件拖到此处</p>
                                  <p>可一次拖拽多个文件</p>
                                </div>
                              </div>
                              <div class="dragtip drop">
                                <i class="clifont anticon-cli-upload"></i>
                                <div class="text-wrap">
                                  <p class="tip-text">松开上传</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="actionsBtn___2uwym">
                      <button class="__nears_primary_1 ant4-btn __nears_primary_1 ant4-btn-primary generate___1wpRF __generate_code_action" type="button" @click="generateQRCode">
                        <span>生成二维码</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Right column - QR Code display section -->
          <div class="include-qrfun-origin">
            <div class="qrbox col-md-4 files-qrcode-wrapper noQrCode noQrCode" :data-is_create_code="isCodeCreated ? '1' : '0'" id="qrfun-box">
              <div class="qrcode-wrapper">
                <div class="qrfun-tab-content code-tab-content">
                  <img id="snapQrimage" src="" style="display: none"/>

                  <!-- QR Code selection options -->
                  <div class="has-code-action after-create-qrfun-item">
                    <div class="choose-label-style-tpl isSimpleStyle" id="choose_label_style_tpl">
                      <div class="choose_label_style_tpl_name" data-container="body" data-content="" data-placement="bottom">
                        标签样式：
                      </div>
                      <div class="choose-tpl-action cliLink" id="toggle_label_style_tpl" @click="toggleLabelStyle">
                        <span class="choose-tpl-action-text" id="choose_tpl_action_text">更换</span>
                        <i class="clifont anticon-cli-angle-right"></i>
                      </div>
                    </div>
                  </div>

                  <!-- QR Code display area -->
                  <div class="qrcode">
                    <table class="qrimage-wrap-loading qrimage-wrap b-a text-center" :data-loading-text="loadingText" id="click-create" style="border-radius:4px;">
                      <tr>
                        <td class="qrimage-td-h" :data-is_create_code="isCodeCreated ? '1' : '0'" style="color:#ececec;font-size: 16px;">
                          <img alt="生成的二维码" id="qrimage" :src="qrImageSrc"/>
                          <div class="deqr-wrapper" id="deqr-wrapper">
                            <router-link class="deqr-link" to="/qrcode/deqr" @click="handleStatistics(1,15)" style="padding-right: 0;padding-left: 4px;color: #666;" title="通过二维码图片，快速解析内容">
                              <span class="clifont anticon-cli-scanning"></span>解码
                            </router-link>
                          </div>
                          <span class="create-code-tip" data-create-code-tip="">
                            <img alt="二维码未生成" src="../../assets/images/ee35eb02b46b.png"/>
                          </span>
                        </td>
                      </tr>
                    </table>

                    <!-- Alternative QR code table for active state -->
                    <table class="qrimage-wrap b-a text-center none click-create-active" data-generate-qractive="" data-loading-text="" style="cursor: pointer;border-radius:2px;">
                      <tr>
                        <td class="qrimage-td-h" :data-is_create_code="isCodeCreated ? '1' : '0'" height="260px;" style="color:#ececec;font-size: 16px;">
                          <img alt="生成的二维码" id="qrimage" :src="qrImageSrc"/>
                          <div class="deqr-wrapper" id="deqr-wrapper">
                            <router-link class="deqr-link" to="/qrcode/deqr" @click="handleStatistics(1,15)" style="padding-right: 0;padding-left: 4px;color: #666;" title="通过二维码图片，快速解析内容">
                              <span class="clifont anticon-cli-scanning"></span>解码
                            </router-link>
                          </div>
                          <span class="create-code-tip" data-create-code-tip="">
                            <img alt="二维码未生成" src="../../assets/images/ee35eb02b46b.png"/>
                          </span>
                        </td>
                      </tr>
                    </table>
                  </div>

                  <!-- QR Code tools section -->
                  <div class="tools-v2 tools after-create-qrfun-item" style="display: block;">
                    <div class="when-have-code">
                      <div class="tab-container">
                        <div class="qr-style-tab-item template-item">
                          <div class="more-setting-info-wrap-box" id="more-setting-info-wrap-box">
                            <div class="qrcode-box more-setting-info-wrap">
                              <span class="more-setting-codetype-text">QR Code</span>，
                              <span class="more-setting-level-text">30%容错</span>
                              <span class="more-setting-size-text">，400×400px</span>
                              <i class="cliIcon anticon anticon-cli-settings more-setting-icon" style="font-size: 16px;"></i>
                            </div>
                            <div class="otherCode more-setting-info-wrap none">
                              <span class="otherCode-text"><span class="otherCodeName">汉信码</span></span>
                              <i class="cliIcon anticon anticon-cli-settings more-setting-icon" style="font-size: 16px;"></i>
                            </div>
                          </div>

                          <!-- Beautification buttons -->
                          <div class="qr-style-tab-item beautify" style="display: block; text-align: center; font-size: 0;margin-bottom: 8px;">
                            <div class="btn-block new-up-icon-btn-wrapper" data-container="body" data-content="该码制暂不提供此功能" data-placement="bottom" id="upload-and-style-btn-wrapper" style="width: 100%;display: inline-flex;">
                              <button class="btn qrfun-btn qrfun-beautify-btn" id="upload-logo-btn" style="margin-right: 6px;" type="button" @click="uploadLogo">上传Logo</button>
                              <button class="btn qrfun-btn qrfun-beautify-btn" id="new-qr-style-func" type="button" @click="beautifyQR">二维码美化</button>
                              <button class="btn qrfun-btn qrfun-beautify-btn none" id="edit-filed-btn" style="margin-left: 6px;" type="button" @click="editField">修改字段</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- QR Tools section with detailed settings -->
                  <div class="tools" id="tools">
                    <div style="display: none;">
                      <ul class="row no-gutter text-darkgrey text-center tits" id="tools-tits">
                        <li class="col-md-3 col-sm-3 col-xs-3 first" data-type="basic">基本</li>
                        <li class="col-md-3 col-sm-3 col-xs-3" data-type="color" id="colorselect">颜色</li>
                        <li class="col-md-3 col-sm-3 col-xs-3" data-type="logo">LOGO</li>
                        <li class="col-md-3 col-sm-3 col-xs-3" data-type="beauty">美化器</li>
                      </ul>

                      <!-- Tools boxes -->
                      <div class="boxs p-x-sm" id="tools-boxs">
                        <!-- Basic settings -->
                        <div class="tools-box base p-t-sm none">
                          <div class="row" id="level-and-size">
                            <div class="col-md-6 col-sm-6">
                              <div class="form-group row no-gutter" style="margin-bottom: 0px;">
                                <label class="form-control-label form-control-xs col-md-4 col-sm-4">容错</label>
                                <div class="col-md-8 col-sm-8">
                                  <div class="dropdown" id="level">
                                    <button aria-expanded="false" class="btn btn-xs btn-block white dropdown-toggle" data-toggle="dropdown">{{ errorCorrectionLevel }}</button>
                                    <input id="level-value" type="hidden" :value="levelValue"/>
                                    <div class="dropdown-menu text-xs">
                                      <a class="dropdown-item" data-level="H" href="javascript:;" @click="setLevel('H', '30%')">30%</a>
                                      <a class="dropdown-item" data-level="Q" href="javascript:;" @click="setLevel('Q', '25%')">25%</a>
                                      <a class="dropdown-item" data-level="M" href="javascript:;" @click="setLevel('M', '15%')">15%</a>
                                      <a class="dropdown-item" data-level="L" href="javascript:;" @click="setLevel('L', '7%')">7%</a>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="col-md-6 col-sm-6">
                              <div class="form-group row no-gutter" style="margin-bottom: 0px;">
                                <span class="form-control-label form-control-xs col-md-4 col-sm-4">大小</span>
                                <div class="col-md-8 col-sm-8">
                                  <button aria-expanded="true" class="btn btn-xs btn-block white dropdown-toggle" data-toggle="dropdown" id="size-btn">{{ qrSize }} px</button>
                                  <div class="form-control pull-left size-range-wrap">
                                    <div id="size-range"></div>
                                  </div>
                                  <input id="size-value" type="hidden" :value="qrSize"/>
                                </div>
                              </div>
                            </div>
                          </div>

                          <!-- Code type selection -->
                          <div class="codetype-wrap form-group text-xs m-t-sm">
                            <label class="form-control-label form-control-xs pull-left p-x-0">码制</label>
                            <div class="dropdown pull-left codetype" id="codetype" style="margin-left: 13px">
                              <button aria-expanded="false" class="btn btn-xs btn-block white dropdown-toggle pointer" data-toggle="dropdown">
                                {{ codeType }}
                              </button>
                              <div class="dropdown-menu text-xs">
                                <a class="dropdown-item" data-codetype="qr" href="javascript:;" @click="setCodeType('qr', 'QR Code')">QR Code</a>
                                <a class="dropdown-item" data-codetype="hanxin" href="javascript:;" @click="setCodeType('hanxin', '汉信码')">汉信码</a>
                                <a class="dropdown-item" data-codetype="pdf417" href="javascript:;" @click="setCodeType('pdf417', 'PDF417')">PDF417</a>
                                <a class="dropdown-item" data-codetype="dm" href="javascript:;" @click="setCodeType('dm', 'DataMatrix')">DataMatrix</a>
                              </div>
                            </div>
                            <a class="text-lightgrey m-l-sm pull-left index-question" data-html="true" data-original-title="什么是码制?" data-placement="top" data-toggle="tooltip" href="help/48235.html" style="position: relative;top:3px;" target="_blank">
                              <i class="fa fa-question-circle"></i>
                            </a>
                            <div class="clearfix"></div>
                          </div>
                        </div>

                        <!-- Color settings -->
                        <div class="tools-box color p-t-sm none">
                          <ul>
                            <li>
                              <span>前景</span>
                              <div class="colorpal">
                                <input class="iColorPicker span1" id="fgcolor" name="mycolor" type="text" :value="foregroundColor"/>
                                <div class="colorPicker-picker cp" id="icp_fgcolor" :style="{backgroundColor: foregroundColor}"></div>
                              </div>
                              <input id="colorvalue" style="display:none;" type="text" :value="foregroundColor"/>
                            </li>
                            <li class="pos-rlt">
                              <span>背景</span>
                              <div class="colorpal">
                                <input class="iColorPicker span1" id="bggcolor" name="mycolor" type="text" :value="backgroundColor"/>
                                <div class="colorPicker-picker cp" id="icp_bggcolor" :style="{backgroundColor: backgroundColor}"></div>
                              </div>
                              <input id="colorvalue1" style="display:none;" type="text" :value="backgroundColor"/>
                              <i class="fa fa-ban" id="bgc" style=""></i>
                            </li>
                            <li class="last">
                              <label>
                                <input :checked="transparentBackground" id="tmbj" type="checkbox" @change="toggleTransparentBackground"/>
                                透明背景
                              </label>
                            </li>
                          </ul>
                          <div class="clearfix"></div>
                        </div>

                        <!-- Logo settings -->
                        <div class="tools-box icons p-t-sm none">
                          <div class="add pos-rlt">
                            <input id="icon_img" name="icon_img" type="hidden" :value="logoImage"/>
                            <div class="row">
                              <div class="col-md-6 col-sm-6" style="padding-left: 4px;padding-right: 8px;">
                                <form action="/upload/icon" class="btn-block form-file" enctype="multipart/form-data" method="post" target="iconupload">
                                  <input class="addFile_btn" data-type="uploadLogo" data-uptype="icon" id="filedatacodeicon" name="Filedata" type="file"/>
                                  <button class="btn btn-block white" style="font-size: 12px;line-height: 12px;height: 28px;" type="button" @click="uploadLogoFile">上传 LOGO</button>
                                </form>
                              </div>
                              <div class="col-md-6 col-sm-6" style="padding-left: 8px;padding-right: 4px;">
                                <button class="btn btn-block white" id="openlogotk" style="font-size: 12px;height: 28px;line-height: 12px;" type="button" @click="openLogoLibrary">常用 LOGO</button>
                              </div>
                            </div>
                            <div class="xshow text-center m-t-xs none" id="iconshow" v-show="logoImage">
                              <img alt="" class="none" id="img_icon" :src="logoImage"/>
                            </div>
                          </div>
                        </div>

                        <!-- Beauty tools -->
                        <div class="tools-box mhq p-t-sm text-center row none">
                          <div class="col-md-6 col-sm-6" style="padding-left: 4px;padding-right: 8px;">
                            <button class="btn btn-block white" id="qr-style" style="font-size: 12px;padding: 6px;" @click="quickBeautify">快速美化器</button>
                          </div>
                          <div class="col-md-6 col-sm-6" style="padding-left: 8px;padding-right: 4px;">
                            <button class="btn btn-block white" id="qrfun-gjmh" @click="advancedBeautify" style="font-size: 12px;margin-top:0px;padding: 6px;">高级美化器</button>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- Reset buttons -->
                    <div class="text-center none" id="redef" style="margin-top: 10px;">
                      <a href="javascript:;" id="ReInitial" style="font-size: 12px;min-height: 0px;color:#999" @click="resetToDefault">恢复默认样式</a>
                    </div>
                    <div class="text-center none" id="redef_new" style="margin-top: 10px;">
                      <a href="javascript:;" id="ReInitial_new" style="font-size: 12px;min-height: 0px;color:#999" @click="resetToBlackWhite">恢复黑白样式</a>
                    </div>
                  </div>
                </div>

                <!-- Fast print content -->
                <div class="qrfun-tab-content fastprint-content none">
                  <div class="fastprint-top">
                    <div class="img-wrapper" id="fastprint-preview">
                      <div class="ant-spin ant-spin-spinning">
                        <span class="ant-spin-dot ant-spin-dot-spin">
                          <i class="ant-spin-dot-item"></i>
                          <i class="ant-spin-dot-item"></i>
                          <i class="ant-spin-dot-item"></i>
                          <i class="ant-spin-dot-item"></i>
                        </span>
                      </div>
                      <img alt="标签" class="none"/>
                    </div>
                    <p class="current-style">标签模板：<span class="style-name">经典样式</span><span class="pointer ml8 label-link" id="change_label_style" @click="changeLabelStyle">更换</span></p>
                    <div class="btn-actions">
                      <span class="pointer label-link change-label-link" data-from="tab-edit" id="fastprint" @click="editLabel">
                        <i class="cliIcon anticon anticon-edit"></i>
                        修改标签内容
                      </span>
                      <button class="btn block-green btn-block fastprint-btn" id="fastprint-download" @click="downloadLabelImage">下载标签图片</button>
                    </div>
                  </div>

                  <!-- Print wrapper -->
                  <div class="print-wrapper" id="print-wrapper">
                    <h4>打印方式</h4>
                    <ul class="print-tabs">
                      <li class="print-tab active" data-index="0" @click="setPrintMode(0)">A4打印机</li>
                      <li class="print-tab" data-index="1" @click="setPrintMode(1)">标签打印机</li>
                      <li class="print-tab" data-index="2" @click="setPrintMode(2)">代印刷服务</li>
                    </ul>

                    <!-- A4 print content -->
                    <div class="print-content print-a4" v-show="printMode === 0">
                      <div class="other-set-item">
                        <div class="label-wrapper">
                          <label>排版</label>
                        </div>
                        <div class="dropdown size-dropdown" id="label_size">
                          <button aria-expanded="false" class="btn other-set-dropdown-btn dropdown-toggle pointer" data-toggle="dropdown">
                            <span>60x65mm（1个/页）</span>
                            <i class="cliIcon anticon anticon-cli-angle-down"></i>
                          </button>
                          <div class="dropdown-menu">
                            <div class="dropdown-item-wrapper">
                              <a class="dropdown-item active" data-data-label_text="60x65mm（1个/页）" data-label_size="1" href="javascript:;" @click="setLabelSize(1, '60x65mm（1个/页）')">
                                <span class="size-number">每页 <span class="bold">1个</span></span>
                                <img alt="每页展示" src=""/>
                                <span class="size-detail">每个 210 x 315mm</span>
                                <span class="triangle"><i class="cliIcon anticon anticon-duoxuan"></i></span>
                              </a>
                            </div>
                          </div>
                        </div>
                      </div>
                      <button class="btn btn-outline b-green text-green btn-block" id="a4-print" style="font-weight: normal;border-radius: 2px;" @click="printA4">排版到A4纸上</button>
                      <p class="text-center label-link down-label-link">
                        <a href="print/service.html" target="_blank">
                          标签落地指南
                          <i class="cliIcon anticon anticon-share-bottom-new"></i>
                        </a>
                      </p>
                    </div>

                    <!-- Label print content -->
                    <div class="print-content print-label none" v-show="printMode === 1">
                      <p class="print-desc">可下载标签图片，使用标签打印机，随用随打，较为灵活</p>
                      <a class="btn block-green btn-block learn-more" data-index="1" href="help/51114.html" target="_blank">详细了解</a>
                      <p class="text-center label-link down-label-link">
                        <a href="print/service.html" target="_blank">
                          标签落地指南
                          <i class="cliIcon anticon anticon-share-bottom-new"></i>
                        </a>
                      </p>
                    </div>

                    <!-- Service print content -->
                    <div class="print-content print-service none" v-show="printMode === 2">
                      <p class="print-desc">代印刷标签，提供不干胶、亚克力、铝板、不锈钢等高品质材质</p>
                      <a class="btn block-green btn-block learn-more" data-index="2" href="print/service.html" target="_blank">详细了解</a>
                      <p class="text-center label-link down-label-link">
                        <a href="print/service.html" target="_blank">
                          标签落地指南
                          <i class="cliIcon anticon anticon-share-bottom-new"></i>
                        </a>
                      </p>
                    </div>
                  </div>
                </div>

                <!-- A4 content -->
                <div class="qrfun-tab-content a4-content none">
                  <div class="img-wrapper" id="a4page-preview">
                    <div class="ant-spin ant-spin-spinning">
                      <span class="ant-spin-dot ant-spin-dot-spin">
                        <i class="ant-spin-dot-item"></i>
                        <i class="ant-spin-dot-item"></i>
                        <i class="ant-spin-dot-item"></i>
                        <i class="ant-spin-dot-item"></i>
                      </span>
                    </div>
                    <img alt="a4单页" class="none" src=""/>
                  </div>
                  <p class="current-style">模板：<span class="style-name">经典样式</span><span class="pointer ml8 label-link" id="change_a4_style" @click="changeA4Style">更换</span></p>
                  <button class="btn block-green btn-block btn-w120-h44" id="a4page" style="font-weight: normal;" @click="editA4Page">编辑单页内容</button>
                  <button class="btn green btn-block btn-cli-green" id="a4page-download" style="margin-top: 8px;" @click="downloadA4PDF">下载PDF文件</button>
                </div>
              </div>

              <!-- Bottom tools navigation -->
              <ul class="sub_nav qrcode-bottom sub_mobile_nav clearfix pull-right" id="qrcode-bottom-tool">
                <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="mh_link">
                  <div class="popover_link_wrap">
                    <a class="tab_sep m-r-0 divider code-meihua-style" href="https://mh.cli.im" @click="handleStatistics(120,147101)" style="display: inline-block;" target="_blank" title="快速美化二维码图案，上传logo等">
                      <span class="clifont anticon-meihua"></span>美化
                    </a>
                    <div class="top-mark"></div>
                    <div class="drop-down">
                      <span class="code-tools-adv-edit-tip">快速美化二维码图案，上传logo等</span>
                    </div>
                  </div>
                </li>
                <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="style-label-created">
                  <div class="popover_link_wrap">
                    <a href="javascript:;" id="style-label-created-link" @click="createStyleLabel">
                      <span class="tab_sep m-r-0 code-meihua-style">
                        <span class="clifont anticon-zhizuobiaoqian"></span>制作标签
                      </span>
                    </a>
                    <div class="top-mark"></div>
                    <div class="drop-down">
                      <span class="code-tools-adv-edit-tip">选择模板，填入数据，批量制作标签</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal dialogs -->
    <!-- More settings modal -->
    <div class="modal fade modal-code-more-setting" data-backdrop="static" data-keyboard="false" id="modal-code-more-setting" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close" data-dismiss="modal" type="button" @click="closeModal('modal-code-more-setting')">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title">下载设置</h4>
          </div>
          <div class="modal-body">
            <div class="main-setting">
              <!-- Code type selection in modal -->
              <div class="wrap-item code-type-wrap" id="code-type-wrap">
                <div class="label-title">
                  码制
                  <i class="cliIcon anticon anticon-QuestionCircle code-type-popover-wrapper" data-container="body" data-content="提供 QR Code、汉信码、 PDF417、Data Matrix4种最常见的码制的生成。" data-placement="top" style="display: inline-block;margin-left: 2px;color: #bbb;cursor: pointer;"></i>：
                </div>
                <div class="radio-content">
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeTypeNew" type="radio" value="qr" v-model="modalCodeType"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">QR Code</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeTypeNew" type="radio" value="hanxin" v-model="modalCodeType"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">汉信码</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeTypeNew" type="radio" value="pdf417" v-model="modalCodeType"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">PDF417</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeTypeNew" type="radio" value="dm" v-model="modalCodeType"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">Data Matrix</span>
                  </label>
                </div>
              </div>

              <!-- Error correction level in modal -->
              <div class="wrap-item code-type-wrap" id="code-level-wrap">
                <div class="label-title">
                  容错率
                  <i class="cliIcon anticon anticon-QuestionCircle code-level-popover-wrapper" data-container="body" data-content="容错率设置越高，二维码生成的码点密度越高，可在遮挡越多的情况下被扫描出来。" data-placement="top" style="display: inline-block;margin-left: 2px;color: #bbb;cursor: pointer;"></i>：
                </div>
                <div class="radio-content">
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeLevel" type="radio" value="L" v-model="modalLevel"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">7%</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeLevel" type="radio" value="M" v-model="modalLevel"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">15%</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeLevel" type="radio" value="Q" v-model="modalLevel"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">25%</span>
                  </label>
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeLevel" type="radio" value="H" v-model="modalLevel"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">30%</span>
                  </label>
                </div>
              </div>

              <!-- Size settings in modal -->
              <div class="wrap-item code-size-wrap" id="code-size-wrap">
                <div class="label-title">尺寸：</div>
                <div class="radio-content">
                  <label class="ant-radio-wrapper">
                    <span class="ant-radio">
                      <input class="ant-radio-input" name="codeSize" type="radio" value="" v-model="modalSize"/>
                      <span class="ant-radio-inner"></span>
                    </span>
                    <span class="radio-text">400 x 400 px</span>
                  </label>
                </div>
              </div>

              <!-- Custom size input -->
              <div class="wrap-item custom-size-wrap none" id="custom-size-wrap">
                <div class="label-title">输入尺寸：</div>
                <div class="input-wrap">
                  <div class="input-box">
                    <input class="custom-size-input" id="customSizeInput" name="codeSize" type="number" v-model="customSize"/>
                    <span class="unit-box">
                      <span class="unit-text">px</span>
                    </span>
                  </div>
                  <span class="size-tip">最大可设为1000px</span>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary success-btn" id="code-more-setting-submit" type="button" @click="saveMoreSettings">保存设置</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Vector format modal -->
    <div class="modal fade modal-code-vector-fromat" id="modal-code-vector-fromat" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-label="Close" class="close" data-dismiss="modal" type="button" @click="closeModal('modal-code-vector-fromat')">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title">
              下载矢量格式
              <span class="modal-title-text">矢量文件不带美化样式和字段，<a class="cliLink" href="help/77747.html" @click="handleStatistics(352,124317)" target="_blank" title="下载矢量格式了解详情">了解详情</a></span>
            </h4>
          </div>
          <div class="modal-body">
            <div class="main-setting">
              <div class="wrap-item code-vector-format" id="code-vector-format">
                <div class="label-title">矢量格式：</div>
                <div class="vector-content">
                  <div class="vector-download-item pdf-download" id="pdf-download" @click="handleStatistics(352,124312); downloadPDF()">
                    <div class="download-box">
                      <img alt="" src="../../assets/images/04d5532a149b.png"/>
                      <span class="format-text">PDF 矢量</span>
                    </div>
                  </div>
                  <div class="vector-download-item svg-download" id="svg-download" @click="handleStatistics(352,124313); downloadSVG()">
                    <div class="download-box">
                      <img alt="" src="../../assets/images/04d5532a149b.png"/>
                      <span class="format-text">SVG 矢量</span>
                    </div>
                  </div>
                  <div class="vector-download-item eps-download" id="eps-download" @click="handleStatistics(352,124314); downloadEPS()">
                    <div class="download-box">
                      <img alt="" src="../../assets/images/04d5532a149b.png"/>
                      <span class="format-text">EPS 矢量</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="wrap-item code-vector-package-download" id="code-vector-package-download">
                <div class="label-title">打包下载：</div>
                <div class="vector-content">
                  <div class="vector-download-item package-download" id="package-download" @click="handleStatistics(352,124315); downloadPackage()">
                    <div class="download-box">
                      <img alt="" src="../../assets/images/04d5532a149b.png"/>
                      <span class="format-text">打包3种格式的矢量格式文件</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- QR Style wrapper -->
    <div class="qr-style-wrapper">
      <div class="qr-style-content">
        <div class="close" @click="closeQRStyle">×</div>
        <div class="real-content"></div>
      </div>
    </div>

    <!-- Alert comment modal -->
    <div class="modal fade" data-backdrop="static" id="modal-alert-comment-box">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="padding:15px 15px;border-bottom: none;">
            <button class="close" data-dismiss="modal" id="comment-close-button" style="position: absolute;right: 15px;top: 15px;" type="button" @click="closeModal('modal-alert-comment-box')">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body p-x-md" style="padding-top:0px;padding-bottom:0px;">
            <div id="comment-box"></div>
            <div class="feedback-item clearfix feedback-box">
              <div class="feedback-label">反馈类型：</div>
              <div class="feedback-content">
                <div class="radio-inline">
                  <label>
                    <input name="comment_type" type="radio" value="1" v-model="commentType"/> 功能建议
                  </label>
                </div>
                <div class="radio-inline">
                  <label>
                    <input name="comment_type" type="radio" value="2" v-model="commentType"/> 问题反馈
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- SEO meta information will be added to head programmatically -->
  </div>
    <!-- Modal dialogs -->
    <!-- Comment and feedback modal -->
    <div class="modal fade" data-backdrop="static" id="modal-alert-comment-box">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header" style="padding:15px 15px;border-bottom: none;">
            <button class="close" data-dismiss="modal" id="comment-close-button" style="position: absolute;right: 15px;top: 15px;" type="button">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body p-x-md" style="padding-top:0px;padding-bottom:0px;">
            <div id="comment-box"></div>
            <div class="feedback-item clearfix feedback-box">
              <div class="feedback-label">回复方式</div>
              <div class="feedback-content feedback-content-500">
                <div>
                  <label class="radio-inline">
                    <input id="receiveWechat" name="receiveMethodModal" type="radio" value="wechat"/>
                    微信快捷接收（推荐）
                  </label>
                  <label class="radio-inline">
                    <input id="receiveEmail" name="receiveMethodModal" type="radio" value="email"/>
                    邮箱接收
                  </label>
                </div>
                <div class="none m-t" id="email-area">
                  <input class="form-control text-xs" id="email" name="email"
                        placeholder="我们将以邮件形式答复你" type="text" value=""/>
                </div>
                <div class="none m-t text-darkgrey" id="wechat-area">
                  <img alt="" class="m-r" id="wechat-qr" src=""/>
                  <div class="logo-in-qrcode">
                    <img alt="loading" src="../../assets/images/28ae6fb6d9ad.png"/>
                  </div>
                  <div class="scan-success none">
                    <i class="fa fa-check text-green"></i> 已关注
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer" style="border-top: none;">
            <span class="m-l text-danger none" id="error-message"></span>
            <button class="btn btn-outline b-green text-green" data-dismiss="modal" id="publish-cancel-btn"
                   style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 11px;width:72px;">
              取消
            </button>
            <button class="btn green" data-loading-text="提交中..." id="publish-submit-btn"
                   style="margin-bottom: 0;margin-left: 5px;height: 28px;font-size: 12px;line-height: 12px;width:72px;">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- File sign read modal -->
    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" data-backdrop="static"
         id="file-sign-read" role="dialog" tabindex="-1">
      <div class="modal-dialog" style="width: 600px; top: 50%; transform: translateY(-60%);">
        <div class="modal-content">
          <div class="modal-body">
            <button aria-hidden="true" class="close close-file-sign-read" data-dismiss="modal"
                   style="padding: 5px;position: absolute;right: 12px;top: 10px;z-index: 10;" type="button">
              ×
            </button>
            <div class="read-file-title">开启阅后登记</div>
            <div class="read-file-content" style="margin-top: 6px;">
              <p>扫码者阅读后，填写你需要收集的信息，方便你管理与汇总
                <a class="read-file-content-more" href="help/56065.html" target="_blank">了解更多</a>
              </p>
              <div class="read-file-form">
                <h4>请勾选需要收集的信息</h4>
                <label class="md-check cli-check">
                  <input checked disabled name="signRecordType" type="checkbox"/>
                  <i class="light"></i>姓名
                </label>
                <label class="md-check cli-check">
                  <input checked disabled name="signRecordType" type="checkbox"/>
                  <i class="light"></i>手机号
                </label>
                <label class="md-check">
                  <input id="sign-book-id-check" name="signRecordType" type="checkbox"/>
                  <i class="green"></i>留言反馈
                </label>
                <label class="md-check">
                  <input id="sign-write-sign-check" name="signRecordType" type="checkbox"/>
                  <i class="green"></i>手写签名
                </label>
              </div>
            </div>
            <div class="know-it">
              <button type="button">保存并开启</button>
              <a class="text-darkgrey none" href="javascript:;" id="close-sign-feature">关闭阅后登记</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Tab navigation -->
    <div class="tab-file-box new-light bottom-white-line">
      <div class="page-main-content" style="position: relative;">
        <div class="nav-fixed-empty"></div>
        <div id="tab-nav">
          <ul class="tab-ul list_tab page-main-content">
            <li class="tab-item noMarginLeft active" data-id="3433" data-name="功能介绍"
                data-tab-id="3433" data-tab-item="" data-tab-path="info" data-tab-type="blog"
                data-tab-url="/files" data-type="文件">
              <a href="files.html" rel="canonical" title="功能介绍">功能介绍</a>
            </li>
            <li class="tab-item" data-id="3833" data-name="最近建码"
                data-tab-id="3833" data-tab-item="" data-tab-path="other" data-tab-type="tp_view"
                data-tab-url="/files/other" data-type="文件">
              <a href="files/other.html" rel="canonical" title="最近建码">最近建码</a>
            </li>
            <li class="tab-item" data-id="3597" data-name="讨论"
                data-tab-id="3597" data-tab-item="" data-tab-path="comment" data-tab-type="comment"
                data-tab-url="/files/comment" data-type="文件">
              <a href="files/comment.html" id="comment-tab-item" rel="canonical" title="讨论">
                讨论(726)
              </a>
            </li>
          </ul>
        </div>
        <a class="text-darkgrey back-to-old-version" href="user/active/addActive.html"
           @click="handleStatistics(110,137)" rel="nofollow" target="_blank">
          返回旧版
        </a>
      </div>
    </div>

    <!-- Content container with article -->
    <div id="new-blog-container"></div>
    <div class="w-p100 p-b-lg tab-file-box white tab-content-container">
      <div class="page-main-content white">
        <div class="article-tab-box clearfix" id="article">
          <div class="wordpress-article">
            <div class="wiki wordpress-article-box doc-content inline" id="wordpress_article_box">
              <div class="wait-now" id="wait_now" style="display: none;">
                <img alt="loading" src="../../assets/images/cbd0851f409c.gif"/>
              </div>
              <div class="wordpress_article_info_box entry-content" id="wordpress_article_info_box">
                <p>把Word、Excel、PDF等文件生成二维码，扫码即可查看和下载文件。文件二维码长期有效，还可以设置查看权限，统计扫描数据。</p>

                <h2>一、核心功能</h2>
                <h3>1. 内容不错位，还原文件真实排版</h3>
                <ul>
                  <li>采用阿里云文件预览转码服务。扫码后手机端自适应排版，内容不错位</li>
                  <li>支持双指放大文件，查看文件细节</li>
                  <li>任意付费版（¥780/年起），提供高清无水印空间，默认启用高级预览，无水印，100%原文件清晰度，<a href="price.html" title="查看价格方案">查看价格方案</a></li>
                </ul>
                <p><img alt="file" data-height="1902" data-width="2636" src="../../assets/images/bf0975dc0a03.png"/></p>

                <h3>2. 付费版支持展示企业品牌标识，防截图全屏水印</h3>
                <ul>
                  <li>在文件预览页左上角显示企业自己的logo和名称，更显专业，提升合作伙伴与客户对品牌的信任度。</li>
                  <li>自定义水印文字并以斜纹覆盖页面，降低文件被截屏外传的风险，全面保护内容安全。</li>
                  <li>任意付费版（¥780/年起），即可使用以上功能，<a href="price.html" title="查看价格方案">查看价格方案</a></li>
                </ul>
                <p><img alt="file" data-height="620" data-width="1336" src="../../assets/images/5d9db9b93dbd.png"/></p>

                <h3>3. 文件随时更新，二维码不变</h3>
                <ul>
                  <li>文件内容随时修改、替换，都无需重新生成二维码</li>
                  <li>线下已印刷或线上已分享的二维码依然有效，无需重复印刷或再次发送</li>
                </ul>

                <h3>4. 可设置查看和下载权限，保障文件安全</h3>
                <p>多重权限管理可有效保护文件隐私，避免未经授权的传播或泄漏。</p>
                <ul>
                  <li>支持加密，输入密码后才能查看文件</li>
                  <li>可设置仅企业成员才能查看，或设置指定成员组查看，<a href="help/50292.html" title="详细了解查看权限">详细了解查看权限</a></li>
                  <li>重要文件可设置下载权限，仅在线查看不允许下载  </li>
                  <li>可设置访问有效期，可访问时间、地理位置等</li>
                </ul>
                <p><img alt="file" data-height="1324" data-width="2880" src="../../assets/images/5c3b59da283b.png"/></p>

                <h3>5. 多种展示效果</h3>
                <ul>
                  <li>提供背景图、背景色、动态背景、样式库等，轻松做出简洁高级的文件展示效果，提升展示形象。</li>
                </ul>
                <p><img alt="file" data-height="1468" data-width="2880" src="../../assets/images/fd0d3adad4c7.png"/></p>

                <h3>6. 一码可展示多个文件及更多内容</h3>
                <ul>
                  <li>
                    <p>二维码不仅支持上传多个文件，也能包含图文、音视频、表格等多种内容。</p>
                  </li>
                  <li>
                    <p>适合用于产品介绍、公司宣传、多文件资料公示等场景。</p>
                  </li>
                </ul>

                <h3>7. 统计扫描数据</h3>
                <ul>
                  <li>可进入后台查看二维码的扫描人数/次数、扫描人、扫描时间、访问地点、设备信息等明细数据，关注码的传播情况。</li>
                </ul>

                <h2>二、免费版介绍</h2>
                <p>大部分基础功能都可免费使用，付费可获得更多高级功能和技术支持。</p>

                <h3>1. 存储空间 不限</h3>
                <ul>
                  <li>单个文件最大 50M，账号的总存储空间不限。</li>
                  <li>免费版所有文件预览页会显示草料标识和水印，默认普通预览（65%清晰度）。</li>
                </ul>

                <h3>2. 二维码长期有效</h3>
                <ul>
                  <li>文件二维码生成后即可长期使用，不会失效。</li>
                </ul>

                <h3>3. 生码个数，扫描次数都不受限制</h3>
                <ul>
                  <li>在草料制作的文件二维码不限个数，也不限制访问次数，你可以大规模应用于线上分享、海报、宣传物料等各种场景。</li>
                </ul>

                <h3>4. 可启用更多基础功能</h3>
                <ul>
                  <li>开启文件阅后登记功能，可实现：扫码者浏览文件后自动提交一条签阅信息，用作已经阅读文件的凭证。</li>
                </ul>
                <p><img alt="file" data-height="475" data-width="1120" src="../../assets/images/c008e8ad87c8.png"/></p>
                <ul>
                  <li>可在二维码内关联表单，其他人扫码可填写姓名、手机号、签字、定位等内容，用来收集信息。适合用于文件电子签阅、意见反馈、签到等场景。</li>
                </ul>

                <h2>三、付费版功能</h2>
                <p>以下是提升文件码使用体验的付费功能介绍，更多付费功能说明可查看 <a href="help/67108.html" title="版本选购建议">版本选购建议</a></p>

                <h3>1. 去除草料标识和水印，文件高清预览</h3>
                <ul>
                  <li>
                    <p>提供高清无水印空间，可去除草料水印，100%原文件清晰度，还原文件真实排版，专业感更强。</p>
                  </li>
                  <li>
                    <p>建议根据自己的图片文件大小选择合适的版本。如不确定，可先选择基础版（780元/年），高清无水印空间不足时再补差价升级更高版本或单独增购提升包。</p>
                  </li>
                </ul>
                <p><img alt="file" data-height="1902" data-width="2636" src="../../assets/images/bf0975dc0a03.png"/></p>

                <h3>2. 显示企业品牌标识</h3>
                <ul>
                  <li>可在文件预览页左上角显示企业自己的logo和名称，更显专业，提升合作伙伴与客户对品牌的信任度。基础版起（780元/年）。</li>
                </ul>
                <p><img alt="file" data-height="560" data-width="1236" src="../../assets/images/72a88a277379.png"/></p>

                <h3>3. 支持防截图全屏水印</h3>
                <ul>
                  <li>可自定义水印文字并以斜纹覆盖页面，降低文件被截屏外传的风险，全面保护内容安全。</li>
                </ul>
                <p><img alt="file" data-height="628" data-width="1236" src="../../assets/images/d3b6b3373df8.png"/></p>

                <h3>4. 支持 AI 解读文件内容</h3>
                <ul>
                  <li>付费高级版起，可开启 <strong>AI解读 </strong>功能，将产品手册、操作指南等内容交给 AI，让扫码者自行提问、快速获取答案。</li>
                  <li>减少重复讲解与人工成本，大幅提升扫码用户体验，高效获取自己关心的重点信息</li>
                  <li>可自定义AI 名称与logo，更贴合品牌形象，打造专属于你的 AI 智能助手，二维码更专业、可信</li>
                </ul>
                <p><a href="scene/5370.html" title="详细了解">详细了解</a></p>
                <p><img alt="file" data-height="834" data-width="1320" src="../../assets/images/570b5eae1f8c.png"/></p>

                <h3>5. 支持上传大文件</h3>
                <ul>
                  <li>
                    <p>免费版限制单个文件最大支持50M</p>
                  </li>
                  <li>
                    <p>付费版单个文件上传最大支持500M，大文件无需费劲压缩，可直接上传更省心</p>
                  </li>
                </ul>

                <h3>6. 支持更多文件类型</h3>
                <ul>
                  <li>
                    <p>免费版可上传常用的文档、表格、图纸等文件格式。</p>
                  </li>
                  <li>
                    <p>付费版支持zip等更多格式。<a href="help/69192.html" title="查看支持的格式">查看支持的格式</a></p>
                  </li>
                </ul>
                <p><br/></p>
                <p><strong>付费基础版（¥780/年起）</strong>，即可享受以上付费权益，提升文件预览体验，更专业、安全。<a href="price.html" title="查看价格方案">查看价格方案</a></p>

                <!-- Template section -->
                <h2>四、相关模板</h2>
                <p>二维码不仅可以展示文件，还可以展示任何你想展示的信息，帮助你完成各项事务管理。</p>
                <p>以下模板来自真实用户案例，你可以快速借鉴，轻松搭建你的二维码。</p>

                <div class="link-card-list default theme-">
                  <a class="link-card-item" href="template/detail/1751586.html" rel="" target="_blank" title="文件电子签阅">
                    <div class="link-card-item-image">
                      <img alt="文件电子签阅" src="../../assets/images/9a971eba471c.png"/>
                    </div>
                    <div class="link-card-item-content">
                      <p class="link-card-item-title">文件电子签阅</p>
                      <p class="link-card-item-description">扫码阅读文件并签字确认，签阅记录可导出存档</p>
                    </div>
                    <div class="divider"></div>
                    <span class="link-card-item-btn">使用模板</span>
                  </a>
                  <a class="link-card-item" href="template/detail/121463544.html" rel="" target="_blank" title="文件阅后登记">
                    <div class="link-card-item-image">
                      <img alt="文件阅后登记" src="../../assets/images/a8c098d8c515.png"/>
                    </div>
                    <div class="link-card-item-content">
                      <p class="link-card-item-title">文件阅后登记</p>
                      <p class="link-card-item-description">阅读指定时长后自动登记，确保内容被有效阅读</p>
                    </div>
                    <div class="divider"></div>
                    <span class="link-card-item-btn">使用模板</span>
                  </a>
                  <a class="link-card-item" href="template/detail/97433049.html" rel="" target="_blank" title="资料汇总">
                    <div class="link-card-item-image">
                      <img alt="资料汇总" src="../../assets/images/3437d31b97d4.png"/>
                    </div>
                    <div class="link-card-item-content">
                      <p class="link-card-item-title">资料汇总</p>
                      <p class="link-card-item-description">将相关资料以“文件夹”的形式汇总在一个码上</p>
                    </div>
                    <div class="divider"></div>
                    <span class="link-card-item-btn">使用模板</span>
                  </a>
                </div>

                <p><a class="wordpressBtn text-white" href="template.html">查看全部模板</a></p>

                <h2>五、常见问题</h2>
                <h3>1. 有些文件为什么不能直接扫码预览？</h3>
                <p>可能是以下原因导致的：</p>
                <ul>
                  <li><strong>格式不支持预览：</strong>草料只支持 word、excel、pdf、ppt 等常见格式在线预览，小众格式不支持。</li>
                  <li><strong>文件过大：</strong>excel 文件最大支持 3M；其他文件最大支持 200M，超出限额不支持预览。</li>
                  <li><strong>可变内容-文件 中上传</strong>：当进行批量建码的时候，在「可变内容-文件」模块内上传的文件，暂不支持设置扫码后直接打开文件。</li>
                </ul>

                <h3>2. 如何设置扫码直接打开文件？</h3>
                <p>当二维码中只有一个文件时，且这个文件是支持在线预览的，才能设置成功。</p>
                <ul>
                  <li>
                    <p><strong>设置方法：</strong>在对应文件的「设置」中，开启「扫码直接打开」即可。</p>
                  </li>
                  <li>
                    <p><strong>请注意：</strong> 草料只有 word、excel、pdf、ppt 等常见格式支持在线预览，其他文件类型暂不支持该功能。</p>
                  </li>
                </ul>

                <h3>3. 怎么更新二维码中的文件？</h3>
                <p>可通过「编辑二维码」功能，删除旧文件，上传新文件即可更新。</p>
                <ul>
                  <li><strong>特别说明：</strong> 二维码只提供扫码查看文件的功能，不支持在线修改文件内容。 若你希望扫码后可实时修改文件内容，推荐使用在线文档类工具，如腾讯文档、金山文档等。</li>
                </ul>
                <p><a href="help/69192.html" title="查看更多文件码问题">查看更多文件码问题</a></p>
              </div>
            </div>
            <!-- Wiki Outline Navigation - Right Sidebar -->
            <div class="wikiOutlineWrapper" ref="outlineWrapper">
              <ul class="wikiOutlineContainer" ref="outlineContainer">
                <li v-for="(item, index) in outlineItems"
                    :key="index"
                    :class="['item', { active: activeOutlineIndex === index }]"
                    :data-target-header="item.tagName"
                    @click="scrollToHeader(item, index)">
                  <span>{{ item.text }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- General alert modal -->
    <div class="modal fade" data-backdrop="true" id="modal-alert">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal" type="button">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title"></h4>
          </div>
          <div class="modal-body p-a-lg"></div>
        </div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

// SEO and meta data
const structuredDataCambrian = ref(`{
  "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonid",
  "@id": "https://cli.im/files",
  "title": "草料文件二维码生成器-帮你把word文档,ppt,excel表格,pdf等文件生成二维码",
  "description": "草料二维码帮你将文件生成二维码,本地文档上传,扫描二维码即可查看文件内容",
  "pubDate": "2025-02-10T14:37:43",
  "upDate": "2025-08-07T00:04:39",
  "images": [
    "https://blogcdnimg.clewm.net/2025/05/image-1746593348371_17465933491137.png?x-oss-process=image/auto-orient,1/quality,q_50/format,jpg",
    "https://blogcdnimg.clewm.net/2025/05/image-1746592621060_17465926216894.png?x-oss-process=image/auto-orient,1/quality,q_50/format,jpg",
    "https://blogcdnimg.clewm.net/2025/02/image-1740562240479_17405622411898.png?x-oss-process=image/auto-orient,1/quality,q_50/format,jpg"
  ]
}`)

const structuredDataSchema = ref(`{
  "@context": "http://schema.org",
  "@type": "WebPage",
  "url": "https://cli.im/files",
  "name": "草料文件二维码生成器-帮你把word文档,ppt,excel表格,pdf等文件生成二维码",
  "description": "草料二维码帮你将文件生成二维码,本地文档上传,扫描二维码即可查看文件内容",
  "mainEntityOfPage": "https://cli.im/files",
  "publisher": {
    "@type": "Organization",
    "name": "草料二维码",
    "url": "https://cli.im"
  },
  "datePublished": "2025-02-10T14:37:43",
  "image": [
    "https://blogcdnimg.clewm.net/2025/05/image-1746593348371_17465933491137.png?x-oss-process=image/auto-orient,1/quality,q_50/format,jpg",
    "https://blogcdnimg.clewm.net/2025/05/image-1746592621060_17465926216894.png?x-oss-process=image/auto-orient,1/quality,q_50/format,jpg",
    "https://blogcdnimg.clewm.net/2025/02/image-1740562240479_17405622411898.png?x-oss-process=image/auto-orient,1/quality,q_50/format,jpg"
  ]
}`)

// Environment variables (from original JS)
const ___ENV = ref('online')
const account = ref('')
const tokenId = ref('')
const file_size = ref(10)
const user_id = ref('')
const edition_id = ref(1)
const _IS_NC_FRONT_PAGE = ref(true)
const __CREATE_FROM = ref(64)
const TPL_ID = ref(2603587)
const isUrl = ref(1)
const _capacity_info = ref(null)

// Wiki outline navigator instance
const wikiOutlineNavigatorIns = ref(null)

// Outline navigation state
const outlineItems = ref<Array<{ text: string, tagName: string, element: HTMLElement }>>([])
const activeOutlineIndex = ref(-1)
const isScrolling = ref(false)
const outlineWrapper = ref<HTMLElement>()
const outlineContainer = ref<HTMLElement>()
const __hide_default_meihua_tip = ref('')
const SOCKETAPISURL = ref('https://socket.api.cli.im')

// QR Code generation state
const qrImageSrc = ref('')
const isCodeCreated = ref(false)
const loadingText = ref('点击生成二维码')

// QR Code settings state
const errorCorrectionLevel = ref('30%容错')
const levelValue = ref('H')
const qrSize = ref('400')
const codeType = ref('QR Code')
const foregroundColor = ref('#000000')
const backgroundColor = ref('#ffffff')
const transparentBackground = ref(false)
const logoImage = ref('')

// Statistics tracking will be defined later in the file

// QR Code operations
const generateQRCode = () => {
  isCodeCreated.value = true
  loadingText.value = '生成中...'
  // QR code generation logic would go here
  console.log('Generating QR code...')
}

const downloadImage = () => {
  if (!qrImageSrc.value) return
  // Download QR code image
  console.log('Downloading QR code...')
}

const printQRCode = () => {
  if (!qrImageSrc.value) return
  // Print QR code
  console.log('Printing QR code...')
}

const previewQRCode = () => {
  if (!qrImageSrc.value) return
  // Preview QR code effect
  console.log('Previewing QR code...')
}

// QR Code customization
const toggleLabelStyle = () => {
  console.log('Toggle label style')
}

const uploadLogo = () => {
  console.log('Upload logo')
}

const beautifyQR = () => {
  console.log('Beautify QR code')
}

const editField = () => {
  console.log('Edit field')
}

// QR Code settings
const setLevel = (level: string, display: string) => {
  levelValue.value = level
  errorCorrectionLevel.value = display + '容错'
}

const setCodeType = (type: string, display: string) => {
  codeType.value = display
}

const toggleTransparentBackground = () => {
  transparentBackground.value = !transparentBackground.value
}

const uploadLogoFile = () => {
  console.log('Upload logo file')
}

const openLogoLibrary = () => {
  console.log('Open logo library')
}

// SSR context
const __ssr_context = ref({
  user: null,
  renderAt: 1754629575752,
  hitCache: 2,
  referer: "",
  userAgent: ""
})

// QR Code configuration (from original JS lines 358-404)
const QR_CONFIG = ref({
  level: "H",
  size: "500",
  bgcolor: "#ffffff",
  forecolor: "#000000",
  dotcolor_o: "000000",
  dotcolor_n: "000000",
  icon: {
    path: "",
    pos: 0,
    zoom: 0
  }
})

const BEAUTIFY_QRCODE_CONFIG = ref({
  bgcolor: "#ffffff",
  bgimg: "",
  forecolor: "",
  logourl: "null",
  logoshape: "no",
  text: "",
  fontsize: "30",
  fontcolor: "#000000",
  fontfamily: "simsun.ttc",
  incolor: "",
  outcolor: "",
  level: "H",
  size: "500",
  qrcode_eyes: "null",
  qrcodesamll: "",
  qrcodemiddle: "",
  qrcodehigh: "",
  background: "",
  wper: "",
  hper: "",
  tper: "",
  lper: "",
  eye_use_fore: "1",
  transparent: "0",
  marginblock: "2",
  qrpad: "10"
})

// QR Code additional state
const qr_value = ref("")
const qr_data = ref('%7B%22info%22%3A%22%22%7D')
const is_active = ref('')
// Other QR variables already defined above

// Modal settings
const modalCodeType = ref('qr')
const modalLevel = ref('H')
const modalSize = ref('')
const customSize = ref(500)

// Print settings
const printMode = ref(0)

// Comment modal
const commentType = ref('')

// Browser info (from original JS lines 25-31)
const __NEW_BROWSER_INFO = ref({})

onMounted(() => {
  // Set document attribute (from original JS line 4, 6)
  document.documentElement.setAttribute('auto_version', 1754556853877 || 0)

  // Initialize browser info (from original JS lines 25-31)
  __NEW_BROWSER_INFO.value = {
    ua: navigator.userAgent,
    language: navigator.language
  }

  // CSS files are now imported in <style> section

  // Initialize application (from original JS lines 16-23)
  initializeApp()

  // Initialize seajs (from original JS line 71)
  if (window.seajs) {
    window.seajs.use('common')
  }

  // Initialize router base (from original JS line 213)
  window.routerBase = "/"

  // Initialize jquery check (from original JS lines 190-192)
  window.__is_pass_load_jquery = window.location.pathname.indexOf("/files") > -1

  // Initialize tippy (from original JS lines 121-143)
  initializeTippy()

  // Initialize QR code display logic (from original JS lines 321-355)
  initializeQRDisplay()

  // Bind event handlers (from original JS lines 289-314)
  bindEventHandlers()

  // Generate navigation outline
  // Initialize outline navigation
  initOutlineNavigation()
})

onUnmounted(() => {
  // Cleanup if needed
  wikiOutlineNavigatorIns.value = null
})


const initializeApp = () => {
  // Application initialization logic (from original JS lines 16-23)
  const isSave = false
  window.$_isSave = isSave
  const front_url = "//static.clewm.net/nc/front"
  window.front_url = front_url
  const autoVersion = "1754556853877"
  window.$autoVersion = autoVersion

  // Set window RAT (from original JS line after 216)
  window.__RAT = Date.now()
}

const initializeTippy = () => {
  // Wait for tippy to load (from original JS lines 121-143)
  const waitTippy = (callback, maxRetries = 10) => {
    let retries = 0
    const check = () => {
      if (typeof (window as any).tippy === 'function') {
        callback()
      } else if (retries < maxRetries) {
        retries++
        setTimeout(check, 500)
      } else {
        console.warn('Tippy load timeout')
      }
    }
    check()
  }

  waitTippy(() => {
    if ((window as any).tippy) {
      (window as any).tippy('.ai-assistant-btn', {
        content: '已接入DeepSeekR1 满血版，各类问题都可快速解答',
        arrow: false,
        interactive: true,
        theme: 'ai-assistant-btn'
      })
    }
  })
}

const initializeQRDisplay = () => {
  // QR display logic (from original JS lines 321-355)
  const isUrlOverLen = false // Would be set from server data
  const urlLen = 0 // Would be set from server data

  if (urlLen >= 2953) {
    // Handle URL too long case
    return
  }

  if (isUrlOverLen) {
    // Handle over length case
    return
  }

  if (qrImageSrc.value) {
    isCodeCreated.value = true
  } else {
    isCodeCreated.value = false
  }
}

const bindEventHandlers = () => {
  // Event handlers (from original JS lines 289-314)
  nextTick(() => {
    const qrTools = document.getElementById('qrcode-bottom-tool')
    if (qrTools) {
      // Bind mouseover/mouseout events for tooltips
      const beautifyLink = qrTools.querySelector('[title="快速美化二维码图案，上传logo等"]')
      if (beautifyLink) {
        beautifyLink.addEventListener('mouseenter', function() {
          this.removeAttribute('title')
        })
        beautifyLink.addEventListener('mouseleave', function() {
          this.setAttribute('title', '快速美化二维码图案，上传logo等')
        })
      }
    }
  })
}

// Event handlers for UI interactions
const handleStatistics = (type: number, id: number) => {
  // Statistics tracking (original StatisticsData function calls)
  if ((window as any).StatisticsData) {
    (window as any).StatisticsData(type, id)
  }
  console.log(`Statistics: ${type}, ${id}`)
}

// generateQRCode function is defined earlier

// Duplicate functions removed - already defined above

const quickBeautify = () => {
  console.log('Quick beautify...')
}

const advancedBeautify = () => {
  handleStatistics(1, 5)
  console.log('Advanced beautify...')
}

const resetToDefault = () => {
  // Reset to default QR settings
  Object.assign(QR_CONFIG.value, {
    level: "H",
    size: "500",
    bgcolor: "#ffffff",
    forecolor: "#000000",
    dotcolor_o: "000000",
    dotcolor_n: "000000",
    icon: { path: "", pos: 0, zoom: 0 }
  })
}

const resetToBlackWhite = () => {
  // Reset to black and white
  QR_CONFIG.value.bgcolor = "#ffffff"
  QR_CONFIG.value.forecolor = "#000000"
  backgroundColor.value = "#ffffff"
  foregroundColor.value = "#000000"
}

// Print and label functions
const changeLabelStyle = () => {
  console.log('Change label style...')
}

const editLabel = () => {
  console.log('Edit label...')
}

const downloadLabelImage = () => {
  console.log('Download label image...')
}

const setPrintMode = (mode: number) => {
  printMode.value = mode
}

const setLabelSize = (size: string, text: string) => {
  console.log(`Set label size: ${size}, ${text}`)
}

const printA4 = () => {
  console.log('Print A4...')
}

const changeA4Style = () => {
  console.log('Change A4 style...')
}

const editA4Page = () => {
  console.log('Edit A4 page...')
}

const downloadA4PDF = () => {
  console.log('Download A4 PDF...')
}

const createStyleLabel = () => {
  console.log('Create style label...')
}

// Outline navigation functions
const initOutlineNavigation = () => {
  nextTick(() => {
    collectHeaders()
    setupScrollListener()
  })
}

const collectHeaders = () => {
  // Collect only h2 and h3 elements from the wordpress article content
  const headers = document.querySelectorAll('.wordpress_article_info_box h2, .wordpress_article_info_box h3')
  outlineItems.value = Array.from(headers).map((header: HTMLElement) => ({
    text: header.textContent || '',
    tagName: header.tagName,
    element: header
  }))
  
  // Set the first item as active by default
  if (outlineItems.value.length > 0) {
    activeOutlineIndex.value = 0
  }

  // Show or hide outline container based on whether there are headers
  if (outlineWrapper.value) {
    if (outlineItems.value.length > 0) {
      outlineWrapper.value.style.display = 'block'
      outlineContainer.value?.classList.add('hasOutline')
    } else {
      outlineWrapper.value.style.display = 'none'
      outlineContainer.value?.classList.remove('hasOutline')
    }
  }
}

const setupScrollListener = () => {
  window.addEventListener('scroll', updateActiveOutline)
}

const updateActiveOutline = () => {
  if (isScrolling.value || outlineItems.value.length === 0) return

  let activeIndex = 0 // Default to first item
  const scrollTop = window.scrollY
  const headerOffsetTop = 100 // Offset for header detection

  // Find the current active header based on scroll position
  for (let i = 0; i < outlineItems.value.length; i++) {
    const element = outlineItems.value[i].element
    const elementTop = element.offsetTop - headerOffsetTop
    
    if (scrollTop >= elementTop) {
      activeIndex = i
    } else {
      break
    }
  }

  activeOutlineIndex.value = activeIndex
}

const isElementScrolled = (element: HTMLElement): boolean => {
  const rect = element.getBoundingClientRect()
  return rect.top <= 100 // Element is considered "scrolled past" when it's 100px from top
}

const scrollToHeader = (item: { element: HTMLElement, text: string }, index: number) => {
  if (activeOutlineIndex.value === index || isScrolling.value) return

  activeOutlineIndex.value = index
  isScrolling.value = true

  // Smooth scroll to the target header
  const offsetTop = item.element.offsetTop
  window.scrollTo({
    top: offsetTop,
    behavior: 'smooth'
  })

  // Reset scrolling flag after animation
  setTimeout(() => {
    isScrolling.value = false
  }, 800)
}

// Modal functions
const closeModal = (modalId: string) => {
  const modal = document.getElementById(modalId) as HTMLElement
  if (modal) {
    modal.style.display = 'none'
    modal.classList.remove('show')
  }
}

const saveMoreSettings = () => {
  // Save modal settings to main config
  QR_CONFIG.value.level = modalLevel.value
  if (customSize.value) {
    QR_CONFIG.value.size = customSize.value.toString()
    qrSize.value = customSize.value.toString()
  }
  closeModal('modal-code-more-setting')
}

const closeQRStyle = () => {
  const wrapper = document.querySelector('.qr-style-wrapper')
  if (wrapper) {
    wrapper.style.display = 'none'
  }
}

// Vector download functions
const downloadPDF = () => {
  console.log('Download PDF vector...')
}

const downloadSVG = () => {
  console.log('Download SVG vector...')
}

const downloadEPS = () => {
  console.log('Download EPS vector...')
}

const downloadPackage = () => {
  console.log('Download package...')
}

// Modal handlers (from original JS lines 410-428)
onMounted(() => {
  nextTick(() => {
    document.addEventListener('click', (event) => {
      const target = event.target as HTMLElement
      if (target && target.hasAttribute('open-help-modal')) {
        const modalId = target.getAttribute('open-help-modal')
        if (modalId) {
          const modal = document.getElementById(modalId)
          if (modal) {
            modal.classList.remove('none')
            modal.classList.add('active')
            document.body.style.overflow = 'hidden'
          }
        }
      }

      if (target && (target.classList.contains('help-modal-backdrop-close') ||
          target.classList.contains('help-modal-backdrop-bg'))) {
        document.body.style.overflow = 'auto'
        const backdrop = target.closest('.help-modal-backdrop') as HTMLElement
        if (backdrop) {
          backdrop.classList.remove('active')
          backdrop.classList.add('none')
        }
      }
    })
  })
})

// Additional CSS from original HTML for component completeness
const additionalCSS = `
  .link-card-list.default {
    display: flex;
    margin: 16px 0;
    justify-content: left;
  }

  .link-card-item-image {
    margin-bottom: 24px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .link-card-item-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    border-radius: 2px;
    pointer-events: none;
  }

  .link-card-list .link-card-item {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    border: 1px solid #f7f8f9 !important;
    padding: 16px !important;
    margin-bottom: 0;
    border-radius: 2px !important;
    width: 200px;
    transition: box-shadow 200ms ease-in-out;
    box-shadow: 0px 0px 14px 0px #f7f8f9 !important;
  }

  .link-card-item-content {
    flex: 1;
  }

  .link-card-list .link-card-item:hover {
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .05) !important;
  }

  .link-card-item .link-card-item-title {
    font-size: 18px;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
  }

  .link-card-item-btn {
    margin: 0 auto;
    color: #4caf50;
    border: 1px solid #4caf50;
    border-radius: 4px;
    padding: 4px 16px;
    font-size: 14px;
    transition: all 200ms ease-in-out;
  }

  .link-card-item .link-card-item-description {
    font-size: 14px;
    color: #767676;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5;
  }

  .link-card-list .link-card-item .divider {
    width: 100%;
    height: 1px;
    background-color: #f7f8f9;
    margin: 10px 0;
  }

  @media (max-width: 768px) {
    .link-card-list.default {
      flex-direction: column;
    }

    .link-card-list .link-card-item {
      width: 100%;
      margin: 0;
      margin-bottom: 16px;
    }
  }

  .wordpressBtn {
    background-color: #4caf50;
    border: 1px solid #4caf50;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
  }

  .mobile-scene-min-width {
    min-width: 1200px;
  }

  .bottom-white-line {
    border-bottom: 1px solid #fff;
  }
`

// Inject additional CSS
if (typeof document !== 'undefined') {
  const styleSheet = document.createElement('style')
  styleSheet.textContent = additionalCSS
  document.head.appendChild(styleSheet)
}
</script>

<!-- Import CSS files from correct location - two levels up from pages/files/ -->
<style src="../../assets/css/490815b50ee0.css" scoped/>
<style src="../../assets/css/00b58f2b8f9a.css" scoped/>
<style src="../../assets/css/e88b6e80fbce.css" scoped/>
<style src="../../assets/css/f6d6073f1386.css" scoped/>
<style src="../../assets/css/b76aaf663b7f.css" scoped/>
<style src="../../assets/css/5e6b9bf9fd2f.css" scoped/>
<style src="../../assets/css/9ded6fd30ce6.css" scoped/>
<style src="../../assets/css/b52c8721e556.css" scoped/>
<style src="../../assets/css/2034b15460f1.css" scoped/>
<style src="../../assets/css/badea43cb35b.css" scoped/>
<style src="../../assets/css/dbece38160fc.css" scoped/>
<style src="../../assets/css/2bd2d45f8cb6.css" scoped/>
<style src="../../assets/css/b3291d7c3f11.css" scoped/>
<style src="../../assets/css/fca07457737e.css" scoped/>
<style src="../../assets/css/c1580d903c0f.css" scoped/>
<style src="../../assets/css/963d993f037a.css" scoped/>
<style src="../../assets/css/228034f02af3.css" scoped/>
<style src="../../assets/css/acfff1e57b0e.css" scoped/>
<style src="../../assets/css/3db6acd047a4.css" scoped/>
<style src="../../assets/css/550d0fc5c52a.css" scoped/>
<style src="../../assets/css/7272988962e3.css" scoped/>
<style src="../../assets/css/b64637f7e36e.css" scoped/>
<style src="../../assets/css/cac1baa43ce6.css" scoped/>
<style src="../../assets/css/4f203d7b339f.css" scoped/>

<style>

/* Inline CSS from original HTML (lines 429-497) */
#wechat-area {
  position: relative;
  height: 100px;
}

#wechat-qr {
  width: 100px;
  height: 100px;
  vertical-align: bottom;
}

.logo-in-qrcode {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 20px;
  height: 20px;
}

.logo-in-qrcode img {
  width: 100%;
  height: 100%;
}

.scan-success {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 100px;
  color: rgba(0, 0, 0, 0.87);
}

#email {
  width: 300px;
  border-radius: 4px;
}

.feedback-box .feedback-label {
  font-size: 14px;
  color: #777;
  width: 95px;
  line-height: 38px;
  float: left;
}

.feedback-box .feedback-content-500 {
  width: 408px;
}

.feedback-box .feedback-content {
  max-width: 100%;
  float: left;
}

.feedback-box .feedback-content .radio-inline {
  color: #666;
  margin-top: 10px;
}

#error-message {
  font-size: 12px;
}

/* Additional inline CSS from original HTML */
.mobile-scene-min-width {
  min-width: 1200px;
}

.bottom-white-line {
  border-bottom: 1px solid #fff;
}

.lity-content {
  /* transform: scale(1.2); */
  max-width: 96%;
}

.block-link {
  margin-bottom: 12px;
}

/* Link card styles - first version */
.link-card-list.default {
  display: flex;
  margin: 16px 0;
  justify-content: left;
}

.link-card-item-image {
  margin-bottom: 24px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.link-card-item-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  border-radius: 2px;
  pointer-events: none;
}

.link-card-list .link-card-item {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  border: 1px solid #f7f8f9 !important;
  padding: 16px !important;
  margin-bottom: 0;
  border-radius: 2px !important;
  width: 220px;
  transition: box-shadow 200ms ease-in-out;
}

.link-card-item-content {
  flex: 1;
}

.link-card-list .link-card-item::before {
  display: none;
}

.link-card-list .link-card-item:hover {
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, .05) !important;
}

.link-card-item:first-child {
  margin-left: 0;
}

.link-card-item .link-card-item-title {
  font-size: 22px;
  line-height: 2;
  margin-top: 0;
  margin-bottom: 10px;
}

.link-card-item-btn {
  margin: 0 auto;
  color: #4aaa69;
  border: 1px solid #4aaa69;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 15px;
}

.link-card-item .link-card-item-description {
  font-size: 15px;
  color: #767676;
  margin-top: 0;
  margin-bottom: 0;
}

.link-card-list .link-card-item .divider {
  width: 100%;
  height: 1px;
  background-color: #f7f8f9;
  margin: 10px 0;
}

/* Enhanced link card styles - second version */
.link-card-list .link-card-item {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
  border: 1px solid #f7f8f9 !important;
  padding: 16px !important;
  margin-bottom: 0;
  border-radius: 2px !important;
  width: 200px;
  transition: box-shadow 200ms ease-in-out;
  box-shadow: 0px 0px 14px 0px #f7f8f9 !important;
}

.link-card-list .link-card-item:hover .link-card-item-btn {
  color: #fff;
  background-color: #4caf50;
}

.link-card-list.theme-blue .link-card-item:hover .link-card-item-btn {
  color: #fff;
  background-color: #166bc7;
}

.link-card-item .link-card-item-title {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: bold;
}

.link-card-item-btn {
  margin: 0 auto;
  color: #4caf50;
  border: 1px solid #4caf50;
  border-radius: 4px;
  padding: 4px 16px;
  font-size: 14px;
  transition: all 200ms ease-in-out;
}

.link-card-list.theme-blue .link-card-item-btn {
  color: #166bc7;
  border: 1px solid #166bc7;
}

.link-card-item .link-card-item-description {
  font-size: 14px;
  color: #767676;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
}

.wordpressBtn {
  background-color: #4caf50;
  border: 1px solid #4caf50;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
  .link-card-list.default {
    flex-direction: column;
  }

  .link-card-item-image {
    max-height: 100vw;
    height: auto;
  }

  .link-card-list .link-card-item {
    width: 100%;
    margin: 0;
    margin-bottom: 16px;
  }

  .mobile-scene-min-width {
    min-width: 1200px;
  }
}
</style>
